<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Network Topology</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <form id="dataForm" class="pth" method="POST">
        <div style="display: flex; align-items: center;"><label for="sheetname">Data Source:&nbsp;&nbsp;</label></div>
        <select id="sheetname" name="sheetname" required>
            <option value="">Loading options...</option>
        </select>
        <button type="submit" style="margin-left: 5px;">Load Data</button>
    </form>
    <!-- 图例 -->
    <div id="legend" class="legend"></div>
    <div id="legend2" class="legend2">Loading...</div>
    <div id="topology"></div>
    <div id="infoPanel" style="display:none; position:absolute; top:20px; right:20px; background-color:#f9f9f9; border:1px solid #ccc; padding:10px; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1);"></div>
    <div id="tooltip" class="tooltip">test</div>
    <script src="{{ url_for('static', filename='js/topology.js') }}"></script>
    <script>
        // 获取下拉菜单选项
        fetch('/get_options')
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('sheetname');
            select.innerHTML = ''; // 清空初始选项
            data.options.forEach(option => {
                const opt = document.createElement('option');
                opt.value = option.value;
                opt.innerHTML = option.label;
                select.appendChild(opt);
            });
        })
        .catch(error => {
            console.error('Error fetching options:', error);
        });
    </script>
</body>

</html>
